Este es el código app.js

 import './App.css'; import React from 'react'; import Contact from './Contact.js'; import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom"; function App() { return ( <div className="App"> <link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Poppins&family=Zen+Kaku+Gothic+Antique&family=Zen+Kaku+Gothic+New:wght@300&display=swap" rel="stylesheet"/> <div className="titlebar"> <Router> <nav> <ul> <img src="/img/GitHub-Mark.png"/> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/services">Services</Link></li> <li><Link to="/contact">Contact Us</Link></li> </ul> </nav> <Switch> <Route path="/contact"> <Contact/> </Route> </Switch> </Router> </div> <div className="prisec"> <h1>lorem</h1> <p>leeyyt</p> </div> <div className="secosec"> <h1>About the founder</h1> <img src="./photo.jpeg"/> <p>yeet</p> </div> </div> ); } export default App;

y este es el código contact.js

 import React from "react"; import "./Contact.css"; function Contact(){ return ( <div className="Contact"> <div className="contact"> <h1>Stay in touch with us</h1> <p>Mail us: @gmail.com</p> <a href="https://in.linkedin.com/in/"> <p>Connect with us on LinkedIn</p> </a> <a href="https://twitter.com/"> <p>Follow us on twitter</p> </a> </div> </div> ); } export default Contact;

pero cuando hago clic en contáctenos, la página contact.js se superpone y la muestra en app.js, el texto está desordenado.